<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html,body{height:100%}
    .cont{width:90%;height:90%;background:#fff;margin:0 auto;position: relative;border: solid 2px black;}
    .fire1{
      width: 10px;
      height:40px;
      position: absolute;
      border-radius:5px 5px 50% 50%;
    }
    .fire2{
      width:10px;height:10px;
      border-radius: 50%;
      position: absolute;
    }
  </style>
</head>
<body>
  <div class="cont"></div>
</body>
<script src="../move.js"></script>
<script>
  // 分析：烟花：元素运动
  // 1. 创建元素
  // 2. 设置样式，颜色，位置
  // 3. 开始运动到目标位置
  // 4. 删除

  // 设计：
  // function Fire({className, start, target, type}){
  //   // 0. 接收参数
  //   this.className = className;
  //   this.start = start;
  //   this.target = target;
  //   this.type = type;
  //   // 1. 创建元素
  //   this.createEle();
  // }
  // Fire.prototype.createEle = function(){
  //   // 创建元素
  //   // 2. 设置样式，颜色，位置
  //   // 3. 开始运动
  //   this.move();
  // }
  // Fire.prototype.move = function(){
  //   // 运动
  //     // 结束后，删除元素
  // }
  // new Fire({
  //   // 样式
  //   className: "fire1",
  //   // 初始位置
  //   start:  { x:random(0, 容器宽-烟花宽), y: 容器高 },
  //   // 目标位置
  //   target: { x:random(0, 容器宽-烟花宽), y: random(0, 容器高-烟花高) },
  //   // 哪个阶段：1表示从下往上阶段，2表示向四周随机阶段
  //   type: 1
  // })

  // 编程：
  function Fire({className, start, target, type, cont}){
    // 0. 接收参数
    this.className = className;
    this.start = start;
    this.target = target;
    this.type = type;
    this.cont = cont;
    // 1. 创建元素
    this.createEle();
  }
  Fire.prototype.createEle = function(){
    const c = randomColor();
    // 创建元素
    this.ele = document.createElement("div");
    this.cont.appendChild(this.ele);
    // 2. 设置样式，颜色，位置
    this.ele.className = this.className;
    this.ele.style.background = `linear-gradient(to bottom, ${c.start}, ${c.end})`;
    this.ele.style.left = this.start.x + "px";
    this.ele.style.top = this.start.y + "px";
    // 3. 开始运动
    this.move();
  }
  Fire.prototype.move = function(){
    // 运动
    move(this.ele, {
      left: this.target.x,
      top: this.target.y
    },()=>{
      // 结束后，删除元素
      this.ele.remove();
      // 截止到此处烟花的核心功能完成，以下为锦上添花
      if(this.type === 2) return;
      for(let i=0;i<10;i++){
        new Fire({
          className: "fire2",
          start:  this.target,
          target: {
            x: random(0, cont.offsetWidth-10),
            y: random(0, cont.offsetHeight-20)
          },
          type: 2,
          cont: cont
        })
      }
    });
  }

  const cont = document.querySelector(".cont");
  
  // setInterval(()=>{
    const startX = random(0, cont.offsetWidth-10);
    new Fire({
      // 样式
      className: "fire1",
      // 初始位置
      start:  {
        x: startX,
        y: cont.offsetHeight
      },
      // 目标位置
      target: {
        x: startX,
        y: random(0, cont.offsetHeight-20)
      },
      // 哪个阶段：1表示从下往上阶段，2表示向四周随机阶段
      type: 1,
      // 放置烟花的容器
      cont: cont
    });
  // }, 800)


  function random(a,b){
    return Math.round(Math.random()*(a-b)+b)
  }
  function randomColor(){
    const r = random(0, 150);
    const g = random(0, 150);
    const b = random(0, 150);
    return {
      start:`rgba(${r},${g},${b},1)`,
      end:`rgba(${r},${g},${b},0.1)`
    }
  }
</script>
</html>